/*************
指标审核
* */
<template>
  <basic-container>
    <el-row>
      <targetExaminHead :sign="{ a: false, b: false, c: true,d: false,e: false}" />
    </el-row>
    <el-row v-if="!isSummary">
      <el-row style="margin:25px 0 0 0 ;">
        <div :height="searchheight">
          <span
            style="float:right;margin-top: -30px;cursor: pointer;"
            @click="searchchangeadvanced"
          >
            {{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="searchForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="考核对象">
                <el-input v-model="searchForm.assessRealName" placeholder="考核对象" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核名称">
                <el-input v-model="searchForm.name" placeholder="考核名称" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核周期">
                <selectSearch @getDataByPerid="getDataByPerid"></selectSearch>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList(1)"
                >检索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-row>
      <el-row>
        <div style="height: 50px; border-bottom: 1px solid #b0bde2">
          <div class="pull-right">
            <el-button type="primary" :disabled="isDisabledSum" @click="proposedSummary">拟定汇总</el-button>
            <el-button type="primary" @click="agreeOrNot(0)" :disabled="isAgreeOrNot">同意</el-button>
            <el-button type="primary" @click="agreeOrNot(1)" :disabled="isAgreeOrNot">驳回</el-button>

            <!-- <el-button type="primary" @click="submit">提交</el-button> -->
          </div>
        </div>
      </el-row>
      <div style="margin:20px 0 0 0 ">
        <span>指标考核&nbsp;&nbsp;</span>
        <el-radio-group v-model="choosePerOrDept" @change="choosePerOrDeptChange">
          <el-radio :label="0">人员</el-radio>
          <el-radio :label="1">机构</el-radio>
        </el-radio-group>
      </div>
      <el-row>
        <el-table
          style="width: 100%;margin-top:20px"
          :data="dataList"
          border
          stripe
          ref="tableRef"
          header-align="center"
          v-loading="dataListLoading"
          @cell-click="unfoldBtn"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" header-align="center" align="center" label="序号" width="55"></el-table-column>
          <el-table-column
            prop="assessUserName"
            align="center"
            label="员工编号"
            show-overflow-tooltip
            v-if="!choosePerOrDept"
          ></el-table-column>
          <el-table-column
            prop="assessRealName"
            align="center"
            label="考核对象"
            show-overflow-tooltip
            v-if="!choosePerOrDept"
          >
            <template slot-scope="scope">
              <span
                style="color:#0e258c;cursor:pointer"
                @click="examine(scope.row)"
              >{{scope.row.assessRealName}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="assessDeptName"
            align="center"
            label="考核对象"
            show-overflow-tooltip
            v-else
          >
            <template slot-scope="scope">
              <span
                style="color:#0e258c;cursor:pointer"
                @click="examine(scope.row)"
              >{{scope.row.assessDeptName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="assessDeptName" align="center" label="部门" show-overflow-tooltip></el-table-column>
          <el-table-column prop="itemNum" align="center" label="指标数量" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-if="scope.row.zbnum != 0">
                <el-badge
                  is-dot
                  class="itembadge"
                >
                  <el-popover placement="top" width="400" trigger="hover">
                    <el-table :data="scope.row.zbdata" max-height="360" size="small" >
                      <el-table-column width="180" property="sqzb" align="center" :label="'上期指标('+scope.row.sqzbnum+')'" show-overflow-tooltip></el-table-column>
                      <el-table-column width="180" property="bqzb" align="center" :label="'本期指标('+scope.row.bqzbnum+')'" show-overflow-tooltip></el-table-column>
                    </el-table>

                    <!-- <el-table :data="scope.row.sqzb" max-height="360" size="small" >
                       <el-table-column width="360" property="name" align="center" :label="'上期指标('+scope.row.sqzbnum+')'" show-overflow-tooltip></el-table-column>
                     </el-table>
                     <el-table :data="scope.row.bqzb" max-height="360" size="small" >
                       <el-table-column width="360" property="name" align="center" :label="'本期指标('+scope.row.bqzbnum+')'" show-overflow-tooltip></el-table-column>
                     </el-table>-->

                    <!--   <div style="align-content: center;width:400px;height: auto;">
                         <div style="float: left;border: 0px solid rgb(176, 189, 226);width:46%;height:99%;margin-right: 2%;align-content: center;">
                           <div style="width:100%;height: 45px;line-height:45px;text-align: center;background-color: #b0bde2;color:black">上期指标({{scope.row.sqzbnum}})</div>
                           <div  style="width:100%;">
                             <ul  v-for="item in scope.row.sqzb"
                                  :key="item.name"
                                  :label="item.name">
                               <li>{{item.name}}</li>
                             </ul>
                           </div>
                         </div>
                         <div style="float: left;border: 0px solid rgb(176, 189, 226);width:46%;height:99%;align-content: center;">
                           <div style="width:100%;height: 45px;line-height:45px;text-align: center;background-color: #b0bde2;color:black">本期指标({{scope.row.bqzbnum}})</div>
                           <div  style="width:100%;">
                             <ul  v-for="item in scope.row.bqzb"
                                  :key="item.name"
                                  :label="item.name">
                               <li>{{item.name}}</li>
                             </ul>
                           </div>
                         </div>

                       </div>-->
                    <span slot="reference">{{ scope.row.itemNum }}&nbsp;</span>

                  </el-popover>
                </el-badge>
              </div>
              <div v-else>
                <span>{{ scope.row.itemNum }}&nbsp;</span>
              </div>
            </template>

          </el-table-column>
          <el-table-column prop="name" align="center" label="考核名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="period" align="center" label="考核周期" show-overflow-tooltip></el-table-column>
          <!-- <el-table-column prop="weight" align="center" label="权重" show-overflow-tooltip></el-table-column> -->
          <el-table-column prop="state" align="center" label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <div>
                <el-popover placement="top" width="660" trigger="hover">
                  <el-table :data="scope.row.gridData" max-height="400">
                    <el-table-column
                      width="260"
                      property="NAME_"
                      label="任务名称"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="ry_name"
                      label="处理人"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="START_TIME_"
                      label="开始时间"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="END_TIME_"
                      label="结束时间"
                      show-overflow-tooltip
                    ></el-table-column>
                  </el-table>
                  <span slot="reference">{{scope.row.state | transTargetState}}</span>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="showMessage(scope.row.processId)"
                  >流程跟踪</el-button>
                </el-popover>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageData.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageData.pageSize"
            :total="pageData.totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-row>
    </el-row>
    <!-- 拟定汇总 -->
    <el-row v-if="isSummary">
      <TianBaoTable
        v-if="isSummary == true"
        ref="tianbaotable"
        :tianBaoTable="tianBaoTable"
        :ids="ids"
        :radio="radio"
        @fnBackOldPage="fnBackOldPage"
        :taskIds="taskIds"
      ></TianBaoTable>
    </el-row>
    <processTracking ref="processTracking" @processTrackingChildren="getDataList"></processTracking>
    <examinView
      v-if="examinVisible"
      ref="examinNode"
      @closeDialog="closeDialog1"
      @refreshDataList="getDataList"
    />
  </basic-container>
</template>

<script>
import targetExaminHead from "@/views/dailyExamine/components/targetExaminHead"; //转态头
import processTracking from "@/views/dailyExamine/components/zbProcessTracking"; //流程组件
import examinView from "./examinView.vue";
import TianBaoTable from "./htndhuizong-table.vue";

import {
  indexExaminList,
  examineList,
  taskList
} from "@/api/dailyExamine/targetExamine/createAssessment"; //接口api
import {
  palnSubmitExamin,
  zbndshSubmit
} from "@/api/dailyExamine/targetExamine/indicatorFormulation";
import selectSearch from "@/views/dailyExamine/components/select-search.vue"; //流程组件

export default {
  data() {
    return {
      isDisabledSum: true,

      choosePerOrDept: 0,
      isAgreeOrNot: true,
      tianBaoTable: {},
      ids: [],
      radio: "1",
      taskIds: [],
      isSummary: false,
      examinVisible: false, //审核弹窗显隐
      searchheight: "0", //搜索组件的高度
      searchadvanced: true, //搜索的显隐
      searchForm: {}, //搜索对象
      dataListLoading: false, //表格是否加载
      dataList: [], //表格数组{ name: "aaa", state: 2 }
      multipleSelection: [], //勾选数据
      pageData: {
        //分页对象
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0
      }
    };
  },
  filters: {},
  components: {
    TianBaoTable,
    targetExaminHead, //状态头
    examinView, //审核组件
    processTracking ,//流程组件
    selectSearch
  },
  watch: {
    multipleSelection: {
      handler(val) {
        if (val.length == 0) {
          this.isAgreeOrNot = true;
        } else {
          this.isAgreeOrNot = false;
        }
      }
    }
  },
  created() {
    this.getDataList();
  },
  methods: {
    //  人员or机构选择改变
    choosePerOrDeptChange(val) {
      this.searchForm = {};
      this.getDataList();
    },
    // 同意or驳回
    agreeOrNot(type) {
      var rows = this.$refs.tableRef.selection;
      if (rows.length == 0) {
        rows = this.$refs.tableRef.data;
      }
      this.$confirm(`是否${type == 0 ? "同意" : "驳回"}选中数据`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(result => {
          console.log("同意or驳回");
          //提交
          if (type == 0) {
            var params = {
              rows: rows,
              type: 0
            };
            zbndshSubmit(params)
              .then(res => {
                this.$message.closeAll();
                this.$message({
                  type: "success",
                  message: "提交成功!"
                });
                this.getDataList();
              })
              .catch(() => {
                this.$message({
                  type: "error",
                  message: "提交失败!"
                });
                this.getDataList();
              });
          }
          //驳回
          if (type == 1) {
            var params = {
              rows: rows,
              type: 1
            };
            zbndshSubmit(params)
              .then(res => {
                this.$message({
                  type: "success",
                  message: "驳回成功!"
                });
                this.getDataList();
              })
              .catch(() => {
                this.$message({
                  type: "error",
                  message: "提交失败!"
                });
                this.getDataList();
              });
          }
        })
        .catch(err => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    fnBackOldPage(data) {
      this.isSummary = false;
      this.ids = [];
      this.multipleSelection = [];
      this.getDataList();
    },
    // 拟定汇总
    proposedSummary() {
      // this.isSummary = true;
      // this.tianBaoTable = {
      //   lastPage: "zbnd"
      // };
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请先选择数据");
      } else {
        this.isSummary = true;
        this.tianBaoTable = {
          lastPage: "zbnd"
        };
      }
    },
    //考核对象展示
    unfoldBtn(row) {
      row.rowshows = !row.rowshows;
      this.rednermsg = false;
      this.$nextTick(() => {
        this.rednermsg = true;
      });
    },
    //数组
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if (c.size < 1) {
          c.push("-");
          c.push("-");
        } else if (c.size < 2) {
          c.push("-");
        }
        return c;
      }
    },
    // 关闭审核弹窗
    closeDialog1() {
      this.examinVisible = false;
    },
    // 点击名字
    examine(data) {
      this.examinVisible = true;
      this.$nextTick(() => {
        this.$refs.examinNode.init(data);
      });
    },
    // 提交
    submit() {
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请先选择要提交的数据");
      } else {
        let ids = this.multipleSelection.map(it => {
          return it.id;
        });
        palnSubmitExamin(ids.toString())
          .then(r => {
            if (r.data.code == 0) {
              this.$message.success("提交成功");
              this.getDataList();
            }
          })
          .catch(err => {});
      }
    },
    // 查询条件的展开关闭
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    // 查询列表
    getDataList() {
      ////
      taskList(
        Object.assign(
          {
            current: this.pageData.pageIndex,
            size: this.pageData.pageSize,
            type: this.choosePerOrDept
          },
          this.searchForm
        ),
        2
      )
        .then(r => {
          if (r.data.code == 0) {
            this.dataList = r.data.data.records.map(it => {
              it.rowshows = true;
              return it;
            });
            this.pageData.totalPage = r.data.data.total;
          }
        })
        .catch(err => {});
    },

    // 勾选数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = val.map(it => {
        return it.id;
      });
      this.taskIds = val.map(it => {
        return it.taskId;
      });
      let temp = Object.assign(val);
      let obj = {};
      if (val.length !== 0) {
        let a = val.map(o => {
          return o.assessId + o.name;
        });
        // console.log(new Set(a));
        if (new Set(a).size > 1) {
          this.isDisabledSum = true;
        } else {
          this.isDisabledSum = false;
        }
      }
      if (val[0].type == 0) {
        this.radio = 1;
      } else {
        this.radio = 2;
      }
    },
    // 条数变化
    sizeChangeHandle(val) {
      this.pageData.pageSize = val;
      this.getDataList();
    },
    // 页码分页变化
    currentChangeHandle(val) {
      this.pageData.pageIndex = val;
      this.getDataList();
    },
    showMessage(proId, row) {
      this.$refs.processTracking.init(proId);
    },
    //选择周期执行搜索功能
    getDataByPerid(period){
        this.searchForm.period = period ;
        this.getDataList() ;
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-select .el-select__tags {
  overflow: auto !important;
}
::v-deep.el-tag.el-tag--info {
  margin: 5px;
  border: 1px solid green;
}
</style>
